<template>
    <!--商品购买页-->
    <div class="tip">
        <!--头部导航-->
        <mt-header fixed title="商品详情">
            <router-link to="/shop/shoplist" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        <!--商品详情页开始-->
        <!--1.0导入轮播图组件，实现轮播图功能-->
        <div class="box">
            <swiper :imgs="imglist"></swiper>
        </div>
        <!--2.0商品购买信息-->
        <div class="box textBox" v-for="(x,index) in list" :key="index">
            <h5 v-html="x.title"></h5>
            <p class="p"></p>
            <p class="price">
                <del>市场价:￥{{x.market_price}}</del>
                <span>销售价:￥{{x.sell_price}}</span>
            </p>
            <p class="btn">
                <output>购买数量:</output>
                <!--使用加减商品的子组件-->
                <inputcar :number="val" v-on:sendCount="getCount"></inputcar>
                <!--这里的sendCount是子组件传过来的方法名，getCount是当前组件自定义的用来接收参数的名称-->
                <!--动画小球-->
                <transition name="show" @before-enter="beforeEnter" @enter="Enter" @after-enter="afterEnter">
                    <div v-if="isShow"  class="ball"></div>
                </transition>
            </p>
            <p class="mintBtn">
                <router-link v-bind="{to:'/shop/shopBys/' + x.id}">
                    <mt-button type="primary">立即购买</mt-button>
                </router-link>
                <mt-button type="danger" @click="toShopCar">加入购物车</mt-button>
            </p>
        </div>
        <!--3.0商品参数信息-->
        <div class="box textBox" v-for="(x,index) in list" :key="index">
            <h5>商品参数</h5>
            <p class="p"></p>
            <p class="des">商品货号:{{x.goods_no}}</p>
            <p class="des">库存数量:{{x.stock_quantity}}</p>
            <p class="des">上架时间:{{x.add_time | datefmate("YYYY-MM-DD")}}</p>
        </div>
        <!--4.0图文介绍加商品评论区域-->
        <div class="box">
            <router-link v-bind="{to:'/shop/shoptextpic/' + this.val}">
                <mt-button plain type="primary" size="large">图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/shop/shoptalk/' + this.val}">
                <mt-button plain type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>

<script>
    import apidoma from "../../kits/common.js";//导入公共域名
    import swipe from "../subcom/swiper.vue"; //导入轮播图子组件
    import inputNumber from "../subcom/inputNumber.vue";//导入购物车加减商品模块组件。
    import {vm,Count} from "../../kits/vm.js";//导入新建的vm对象和方法名，注意这里是按需导入，要用{}方式进行导入。
    import {setData,objShop} from "../../kits/locaMsg.js"; //导入存储到本地localStorage中的方法,按需导入。
    export default{
        components: { //进行轮播图组件的注册
            swiper: swipe,
            inputcar: inputNumber//注册购物车加减商品模块。
        },
        data(){
            return {
                isShow: false,//小球动画的初始状态
                imglist: [],//用来存取商品详情页轮播图信息。
                list:[],//用来存取商品购买部分信息。(带按钮)
                piclist: [],//用来存取商品详细参数信息。
                val: "", //用来接收商品列表页传过来的id。
                count: "" //用来记录购买的商品数量。
            }
        },
        created(){
            this.val = this.$route.params.pic;
            this.getImg(); //获取轮播图
            this.getMsg(); //获取商品购买信息
        },
        methods: {
            getImg(){ //获取商品详情页轮播图信息
                //确定url地址
                const url = apidoma.picdoName + "/api/getthumimages/" + this.val;
                this.$http.get(url).then(function(response){
                    this.imglist = response.body.message;
                });
            },
            getMsg(){//获取商品购买信息(按钮页)
                //确定url地址
                const url = apidoma.picdoName + "/api/goods/getinfo/" + this.val;
                this.$http.get(url).then(function(response){
                    this.list = response.body.message;
                });
            },
            getCount(input){//定义一个方法用来接收子组件(加减功能组件)传来的值。
                this.count = input;
            },
            toShopCar(){//定义一个方法将数据保存到vm对象中。
                vm.$emit(Count,this.count);//这里将值保存到了Vm对象中
                //点击将商品保存到购物车的同时保存到本地localStorage中
                objShop.shopId = this.val;//保存id
                objShop.shopCont = this.count;//保存数量
                setData(objShop);//将值保存到本地localStorage中。
                this.isShow = !this.isShow;
            },
            beforeEnter(el){
                el.style.transform = "translate(0px,0px)";
            },
            Enter(el,done){
                el.offsetWidth;//刷新小球，保证动画
                el.style.transform = "translate(110px,355px)";//设置小球的结束位置S
                done();//保证小球动画可以一直运行
            },
            afterEnter(){
                this.isShow = !this.isShow;//改变小球的状态，使其再次隐藏
            }
        }
    }
</script>

<style scoped>
    .mint-header.is-fixed {
        z-index: 2;
    }
    .box {
        border: 1px solid rgba(0,0,0,0.3);
        border-radius: 10px;
        margin: 0 4px;
        overflow: hidden;
    }
    .textBox {
        padding: 0 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .textBox h5 {
        color: #0027ff;
        font-weight: 700;
        font-size: 16px;
    }
    .p {
        height: 1px;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.3);
    }
    .price span {
        color: #e92322;
        font-weight: 700;
        margin-left: 20px;
    }
    .mintBtn {
        margin: 15px 0;
    }
    .mint-button--normal, .mint-button--small {
        border-radius: 6px;
    }
    .des {
        margin-left: 40px;
        font-weight: 700;
    }
    .mint-button--large {
        margin: 10px 0;
    }
    /*动画小球*/
    .ball {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #e92322;
        position: fixed;
        left: 122px;
        top: 265px;
        transition: all 0.4s ease;
        z-index: 100;
    }
</style>
